<template>
    <div>
        <section class="freeClass">
                <h2>
                    <!-- 普通插槽 -->
                    <slot></slot>
                </h2>
                <a href="">更多</a>
                <ul class="freeClass-list" v-for="(item,index) in courseList" :key="index">

                    <li>
                      <router-link :to="{path:'course',query:{courseId:item.courseId}}" tag="div"><img class="courseImg" alt="" :src="item.coverFileUrl"></router-link>
                        <p>{{item.courseTitle}}</p>
                        <span>共{{item.learningNum}}节课|{{item.participationsCount}}人报名</span>
                        <p v-if="item.isFree==1">免费</p>
                        <p v-else class="payfor">
                          <span>￥{{item.discountPrice}}</span>
                          <span>￥{{item.coursePrice}}</span>
                           </p>
                    </li>
                </ul>
                <div style="clear:both"></div>
            </section>
    </div>
</template>
<script>
// import courseList from "../api/api"

export default{
    name:'courseType',
    data(){
        return {
            courseList:"[]"
        }
    },
    props: {
          // type:String,
          type: {
            type: [String, Number],
            default() {
              return "free";
            },
          },
          pagenum: {
            type: [String, Number],
            default() {
              return 1;
            },
          },
          pagesize: {
            type:[String,Number],
            pagenum: [String, Number],
            pagesize: [String, Number],
          },
        },
        created() {
          console.log(this.type);
          console.log(this.pagesize);
          console.log(this.pagenum);
          this.getCourseList(this.type, this.pagesize, this.pagenum);
          // this.getCourseList("free",10,1)
          // this.getCourseList("free",10,1)
        },

        methods: {
          // 根据不同参数获取不同课程列表
          getCourseList(type, pageSize, pageNum) {
            // 请求接口，数据初始化
            let form = new FormData();
            form.append("type", type);
            form.append("pageSize", pageSize);
            form.append("pageNum", pageNum);
            
              this.$axios.post(
                "/api/weChat/applet/course/list/type",
                form
              )
              .then((res) => {
                console.log(res);
                this.courseList = res.data.rows;
              });

          },
        },
}
</script>
<style scoped>
   * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
a {
    color: black;
    text-decoration: none;
}
a:hover {
    color: red;
}
ul {
    list-style: none;
}
   /* 免费课程 */
   .payfor>span:nth-of-type(1) {
     color: red;
   }
   .payfor>span:nth-of-type(2) {
     color: #999;
     font-size: 12px;
     text-decoration: line-through;
   }
.freeClass {
    position: relative;
    margin: 20px auto 0px;
    width: 1200px;
    text-align: center;
}
.freeClass>h2 {
    margin: 0 auto;
    width: 100%;
    height: 50px;
    font-size: 24px;
    color: #333;
    font-weight: normal;
    display: inline-block;
    border-bottom: 2px solid #e8e8e8;
}
.freeClass>a {
    position: absolute;
    /* top: 10px; */
    right: 10px;
}
.freeClass-list {
    /* overflow: hidden; */
    box-sizing: border-box;
}
.freeClass-list>li {
    float: left;
    margin-top: 20px;
    width: 20%;
    padding: 0px 10px;
    text-align: left;
    
}
.freeClass-list>li>div {
    margin-bottom: 8px;
    width: 100%;
    height: 123px;
    overflow: hidden;
}
.freeClass-list>li>div>img {
    width: 100%;
    height: 100%;
}
.freeClass-list>li>p {
    font-size: 14px;
    height: 24px;
}
.freeClass-list>li>span {
    color: #888;
}
.freeClass-list>li>p:nth-of-type(2) {
    /* height: 27px; */
    color: #00cf8c;
    font-size: 16px;
}
.freeClass-list>li>div>img:hover {
    transform: scale(1.1,1.1);
    /* transition-delay: 10s; */
  }
 

</style>
